<template>
	<view class="container">
		<view class="user-section">
			<view class="vip-card-box">
				<text>牧耘郎会员卡</text>
				<text class="text">开通铂金会员 终身享受<span> {{q_count}} </span>大权益</text>
			</view>
			<view class="info-box">
				<image class="card-bg" mode="widthFix" src="static/card.png"></image>
				<view class="img">
					<image class="portrait" src='static/touxiangkuang.png'></image>
					<image class="face" src='/static/img/public/myl.png'></image>
					<image class="vip" src='/static/vn.png'></image>
					<text class="text">V<span>2</span></text>
				</view>
				<view class="text">
					铂金会员卡
				</view>
				<view class="cart_number">{{vip_code}}</view>
			</view>
		</view>
		<view class="list-section">
			<view class="s-header">
				获得3个好友助力，即可免费办理牧耘郎会员卡
			</view>
			<view  class="list-item">
				<view v-for="(item,index) in friend" :key="index" class="cate-item">
					<image :src="imgIcon + item.avatar "></image>
					<!-- <image :src="item.avatar?imgsrc + item.avatar:'/static/avatar.png'" ></image> -->
					<!-- <image :src="imgsrc + item.avatar" ></image> -->
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="phoneNumber">
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(171,173,173,0.8);"/>
			</view>
			<!-- <view class="btn" @tap="toHelp"><web-view :src="url">为他助力</web-view></view> -->
			<view class="btn" @tap="toHelp">为他助力</view>
			<view class="rlue">活动规则</view>
			<view class="text">
				<view>1. 分享给好友，获得三个好友的助力，即可免费办理会员卡，但会员赠品将取消。</view>
				<view>2. 每个好友只能助力一次。如果在规定时间内，未集满助力，将取消该次办理的名额。</view>
				<view>3. 好友收到助力邀请后，下载并注册登录牧耘郎，方才算助力成功。</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Api from '@/common/api';
	export default {

		data() {
			return {
				imgsrc: Api.imgsrc,
				friend: [],
				count: '',
				q_count: '',
				url:'',
				shareClass: '', //分享弹窗css类，控制开关动画
				valid_time: '',
				phoneNumber:'',
				url: 'http://download.dfkjt.com/html/download.html',
				invite_code: '',
				valid_id: '',
				vip_code: '',
				imgIcon: Api.imgIcon,

			};
		},
		onLoad(opsions) {
			this. invite_code = opsions.invite_code
			this. valid_id = opsions.valid_id
			this.loadData(opsions)
			
		},
		methods: {
			async loadData(opsions) {
				
				let params = {'invite_code': this.invite_code,
				    'valid_id': this.valid_id}
				let data = await Api.apiCall('post',Api.vip.help_list, params)
				let friend = data.friend;
				this.vip_code = data.vip_code
				let temp = [];
				for (let i=0; i<3; i++){
					let help_uid = '';
					let name = '等待助力';
					let avatar = '/static/avatar.png';
					if(friend.length>i){
						console.log('进来赋值了')
						help_uid = friend[i].help_uid
						name = friend[i].name
						avatar = friend[i].avatar
					}
					temp.push({
					"help_uid": help_uid,
					"name": name,
					"avatar": avatar
				})
				}
				this.friend = temp;
				console.log('')
				 
			},
		async toHelp(){
				let params = {'invite_code': this.invite_code,
				    'valid_id': this.valid_id, 'mobile': this.phoneNumber}
				let data = await Api.apiCall('post',Api.vip.help, params)
				if (data){
					location.href ='http://download.dfkjt.com/html/download.html'
				}
				

			}
			
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}
	.yticon {
		font-size: 28upx;
		color: #232323;
	}
	.user-section {
		width: 100%;
		height: 520upx;
		padding: 47upx 4% 106upx;
		// background-color: #232323;
		background: linear-gradient(to right, rgba(255, 237, 197, 1.0), rgba(255, 233, 170, 1.0));
		border-bottom-left-radius: 120upx 60upx;
		border-bottom-right-radius: 120upx 60upx;

		.vip-card-box {
			width: 100%;
			height: 140upx;
			color: #232323;
			display: flex;
			flex-direction: column;
			font-size: $font-sm + 32upx;
			font-weight: 600;
			border-radius: 20upx;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 36upx;
				font-weight: 600;

				span {
					color: #E52631;
					padding: 0 8upx;
					font-size: 56upx;
				}
			}
		}

		.info-box {
			width: 100%;
			height: 354upx;
			padding: 0 10upx;
			margin-top: 54upx;
			position: relative;
			color: #F9E2A2;
			font-size: $font-sm + 8upx;

			.card-bg {
				width: 670upx;
				height: 350upx;

			}

			.img {
				width: 112upx;
				height: 140upx;
				position: absolute;
				left: 60upx;
				top: 40upx;

				.portrait {
					left: 0;
					top: 0;
					width: 112upx;
					height: 112upx;
					border-radius: 50%;
					background-color: #FFF2BC;
				}

				.face {
					width: 80upx;
					height: 80upx;
					top: -102upx;
					left: 18upx;
				}

				.vip {
					width: 51upx;
					height: 40upx;
					top: -110upx;
					left: 32upx;
				}

				.text {
					top: 96upx;
					left: 42upx;
					color: #232323;
					font-size: $font-sm - 2upx;
				}

				span {
					font-size: 8upx;
				}
			}

			.text {
				position: absolute;
				top: 72upx;
				left: 200upx;

			}

			.cart_number {
				position: absolute;
				top: 280upx;
				left: 190upx;
			}
		}
	}

	.list-section {
		width: 100%;
		height: 308upx;
		margin-top: 116upx;

		.s-header {
			width: 100%;
			padding: 38upx 40upx 10upx;
			color: #232323;
			font-size: 32upx;
			// border: 1upx solid red;
		}

		.list-item {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-wrap: wrap;
			padding: 30upx 60upx 46upx;

			.cate-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: $font-sm + 4upx;
				color: #757777;
			}

			/* 原图标颜色太深,不想改图了,所以加了透明度 */
			image {
				width: 88upx;
				height: 88upx;
				margin-bottom: 12upx;
				border-radius: 50%;
				// opacity: .7;
				opacity: 1;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 20upx 30upx 56upx;
		display: flex;
		flex-direction: column;
		.phoneNumber {
			width: 560upx;
			height: 88upx;
			margin-left: 65upx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba($color: #F0F3F4, $alpha:1);
			// border: 2upx solid #E1E4E5;
			padding: 0 60upx;
			input {
				width: 100%;
				height: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: rgba($color: #ABADAD, $alpha: 1);
				font-weight: 200;
			}
		}
		
		.btn {
			width: 560upx;
			height: 88upx;
			margin: 30upx 65upx 0;
			// margin-left:65upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 44upx;
			background-color: #FFBC21;
			color: #232323;
			font-size: 28upx;
		}
		.rlue {
			width: 100%;
			padding: 112upx 0 30upx;
			display: flex;
			font-size: 28upx;
			justify-content: center;
			align-items: center;
			color: #ACADAE;
		}
		.text{
			width: 100%;
			height: 268upx;
			display: flex;
			flex-wrap: wrap;
			font-size: $font-sm + 4upx;
			color: #ACADAE;
			view{
				text-indent: 1em;
				letter-spacing: 1.8upx;
				line-height:1.6;
			}
		}

	}
	
</style>
